<template>
  <div class="wrapper">
    <div class="content_wrap_box">
      <div class="img_box"></div>
      <div class="content_box">
        <div class="header">
          <img src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/LOGO.png" alt="" />
          <span class="name">恒蓝云</span>
          <span class="yu">欢迎登录</span>
        </div>
        <div class="desc">
          <img src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/slogan.png" alt="" />
        </div>

        <div class="input_box">
          <a-input
            placeholder="请输入账号"
            v-model:value="userInfo.userName"
            class="user_name_input"
          >
            <template #prefix>
              <img
                src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/userName.png"
                alt=""
                width="20"
              />
            </template>
          </a-input>
          <a-input-password
            placeholder="请输入密码"
            v-model:value="userInfo.passWrod"
            class="user_name_password"
          >
            <template #prefix>
              <img
                src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/pass.png"
                alt=""
                width="20"
              />
            </template>
          </a-input-password>

          <!-- @again="onAgain"
  @fulfilled="onFulfilled"
  @success="onSuccess"
  @fail="onFail"
  @refresh="onRefresh" -->
          <!-- <slide-verify ref="slideblock" :accuracy="1" :slider-text="`向右滑动`"></slide-verify> -->

          <!-- <slide-verify
            class="silde_box"
            ref="block"
            :slider-text="`向右滑动`"
            :accuracy="1"
            @again="onAgain"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
          ></slide-verify> -->

          <div style="margin" class="verify_box">
            <a-button class="verify_btn" v-if="!isVerify" @click="isShowVerifyModal = true">
              <img
                src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/pingtu.png"
                style="width: 20px; height: 20px"
                alt=""
              />
              <span style="letter-spacing: 3px"> 点击进行验证 </span>
            </a-button>
            <a-button class="verify_btn_ok" type="primary" v-else>
              <CheckCircleOutlined style="font-size: 20px" />
              <span style="letter-spacing: 3px"> 验证已通过 </span>
            </a-button>
          </div>
          <!-- <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>
          <div>{{ msg }}</div> -->
          <a-checkbox style="margin-top: 20px" v-model:checked="isRememberUser"
            >记住用户</a-checkbox
          >
        </div>

        <div class="btn_box">
          <a-button type="primary" class="login_btn" :disabled="!isVerify" @click="loginClick">
            <span>点击登录</span></a-button
          >
        </div>
      </div>
    </div>

    <a-modal
      style="width: 360px; top: 50%; transform: translate(0%, -50%)"
      v-model:visible="isShowVerifyModal"
      :footer="false"
      :closeIcon="true"
    >
      <a-card style="width: 100%" v-if="isShowVerifyModal">
        <slide-verify
          v-if="isShowVerifyModal"
          class="silde_box"
          ref="block"
          :slider-text="`向右滑动`"
          :accuracy="20"
          :imgs="['https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/lohandVerify_imgs_1.png']"
          @again="onAgain"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          @fulfilled="fulfilledFunc"
        ></slide-verify>
      </a-card>
    </a-modal>
    <a-modal
      style="width: 360px; top: 50%; transform: translate(0%, -50%)"
      v-model:visible="loginLoading"
      :footer="false"
      :closeIcon="true"
    >
      <a-card style="width: 100%; display: flex; padding-left: 32px" v-if="loginLoading">
        <div class="spinner" style="display: inline-grid"></div>
        <span style="position: relative; top: -15px; left: 20px; font-size: 18px; font-weight: 600"
          >正在登录，请稍等......</span
        >
      </a-card>
    </a-modal>
    <!-- 
    <div class="bg_mark" style="width: 100vw; height: 100vh">
      <img src="./image/bg.jpg" alt="" />
    </div> -->

    <div class="bg_mark" style="width: 100vw; height: 100vh; z-index: 101000000000">
      <img src="./image/bg2.jpg" style="width: 100vw; height: 100vh" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted} from 'vue'
  export default defineComponent({
    name: 'login'
  })
</script>

<script lang="ts" setup>
  import SlideVerify, {SlideVerifyInstance} from 'vue3-slide-verify'
  import 'vue3-slide-verify/dist/style.css'
  import {UserOutlined, InfoCircleOutlined, CheckCircleOutlined} from '@ant-design/icons-vue'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  let {router, store} = useGlobalAPI()

  // 登录加载的标识
  const loginLoading = ref(false)

  // 记住用户处理函数
  const rememberUserDispose = () => {
    if (isRememberUser.value) {
      localStorage.setItem('isRememberUser', JSON.stringify(true))
      localStorage.setItem(
        'rememberUserInfo',
        JSON.stringify({
          userName: userInfo.value.userName,
          passWord: userInfo.value.passWrod
        })
      )
    } else {
      localStorage.removeItem('isRememberUser')
      localStorage.removeItem('rememberUserInfo')
    }
  }

  // 登录按钮的点击事件
  const loginClick = () => {
    console.log(userInfo.value.userName)
    console.log(userInfo.value.passWrod)
    rememberUserDispose()
    loginLoading.value = true
    store
      .dispatch('login/LOGIN', {
        userName: userInfo.value.userName,
        userPass: userInfo.value.passWrod
      })
      .then(res => {
        // closeLoading()
        console.log(res)
        loginLoading.value = false
        // router.push('/CBC')
        router.push('/visualLargeScreen')
      })
      .catch(err => {
        loginLoading.value = false
        // closeLoading()
      })
  }

  // 用户的账号和密码数据
  const userInfo = ref<{
    userName: string
    passWrod: string
  }>({
    userName: '',
    passWrod: ''
  })

  // 记住用户的标识
  const isRememberUser = ref(false)

  // 是否通过验证的标识
  const isVerify = ref(false)

  // 是否显示拼图验证的弹窗的标识
  const isShowVerifyModal = ref(false)

  // const msg = ref('')
  const block = ref<SlideVerifyInstance>()

  const onAgain = () => {
    // console.log(1)

    // msg.value = '检测到非人为操作的哦！ try again'
    // 刷新
    block.value?.refresh()
  }

  const onSuccess = (times: number) => {
    isVerify.value = true
    setTimeout(() => {
      isShowVerifyModal.value = false
    }, 500)
    // msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`
  }

  const fulfilledFunc = () => {
    console.log('加载完成')
  }

  const onFail = () => {
    // console.log(1)
    // msg.value = '验证不通过'
  }

  const onRefresh = () => {
    // console.log(1)
    // msg.value = '点击了刷新小图标'
  }

  const handleClick = () => {
    // 刷新
    block.value?.refresh()
    // msg.value = ''
  }

  // 读取记住用户本地缓存的数据的函数
  const readLocalRememberUserInfoFunc = () => {
    let isRememberUsers = JSON.parse(localStorage.getItem('isRememberUser'))
    let userInfos = JSON.parse(localStorage.getItem('rememberUserInfo'))
    console.log(isRememberUser, userInfo)

    if (
      isRememberUsers != '' &&
      isRememberUsers != null &&
      isRememberUsers != undefined &&
      userInfos != '' &&
      userInfos != null &&
      userInfos != undefined
    ) {
      isRememberUser.value = isRememberUsers
      userInfo.value.userName = userInfos.userName
      userInfo.value.passWrod = userInfos.passWrod
    }
  }
  // 初始化阶段
  onMounted(() => {
    readLocalRememberUserInfoFunc()
  })
</script>

<style lang="less" scoped>
  ::v-deep .ant-modal-body {
    width: 400px !important;
  }
  ::v-deep .ant-checkbox-inner {
    border-radius: 50%;
  }
  .wrapper {
    // background: rgb(222, 234, 254);
    width: 100%;
    height: 100%;
    // background-image: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/new_bg.png);
    // background: url(./image/bg.jpg);
    // bac
    // background-position: -0% 90%;
    background-size: 100%;
    .content_wrap_box {
      width: 980px;
      height: 550px;
      border-radius: 10px;
      // border: 1px solid red;
      // margin: 100px auto;
      position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%);
      top: 0;
      bottom: 0;
      left: 0%;
      right: 0%;
      margin: auto;
      display: flex;

      .img_box {
        width: 57%;
        height: 550px;
        opacity: 0.5;
        // background: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/bg-left.png);
        background: url('./image/bg_left.jpg');
        background-size: 148%;
        background-position: -120px;
        border-radius: 0px;
        // border-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        // border: 1px solid red;
      }
      .content_box {
        width: 43%;
        height: 550px;
        // background: rgba(0, 0, 0, 0.1);
        background: white;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 30px 20px 20px 50px;

        .header {
          display: flex;
          line-height: 30px;
          padding-left: 40px;
          padding-top: 10px;
          // margin: 0 auto;
          img {
            width: 30px;
            height: 30px;
          }

          .name {
            display: inline-block;
            color: rgb(49, 69, 106);
            font-family: kaigengo-bold;
            font-weight: 700;
            font-size: 26px;
            margin-left: 6px;
          }
          .yu {
            color: #007aff;
            font-size: 22px;
            margin-left: 20px;
            font-weight: bold;
            line-height: 32px;
          }
        }

        .desc {
          margin-top: 18px;
          margin-left: 20px;
          img {
            width: 266px;
            height: 18px;
          }
        }

        .input_box {
          margin-top: 64px;
          .user_name_input {
            line-height: 32px;
            width: 320px;
            border-radius: 22px;
            letter-spacing: 2px;
          }
          .user_name_password {
            line-height: 32px;
            width: 320px;
            border-radius: 22px;
            margin-top: 20px;
            letter-spacing: 2px;
          }
        }

        .verify_box {
          margin-top: 20px;

          .verify_btn {
            padding: 10px 0px 0px 94px;
            display: flex;
            width: 324px;
            height: 42px;
            border-radius: 30px;

            img {
              margin-right: 10px;
            }
          }
          .verify_btn_ok {
            padding: 10px 0px 0px 104px;
            display: flex;
            width: 324px;
            height: 42px;
            border-radius: 30px;
            text-align: center;

            // svg {
            //   margin-top: -30px;
            // }
          }

          .verify_text {
            letter-spacing: 3px;
          }
        }

        .btn_box {
          margin-top: 50px;
          .login_btn {
            width: 324px;
            height: 48px;
            border-radius: 30px;

            span {
              letter-spacing: 5px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  ::v-deep .ant-btn {
    border-radius: 30px !important;
  }

  ::v-deep .verify_box .ant-btn-primary {
    // background-color: rgb(17, 124, 251) !important;
    background-color: rgb(20, 201, 20) !important;
    border: none !important;
  }

  ::v-deep .verify_box .ant-btn:focus {
    color: rgb(20, 201, 20);
    border-color: rgb(20, 201, 20) !important;
  }

  ::v-deep .verify_box .ant-btn:hover {
    color: rgb(20, 201, 20);
    border-color: rgb(20, 201, 20) !important;
  }

  ::v-deep .ant-modal {
    top: 50% !important;
  }

  .spinner {
    width: 56px;
    height: 56px;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #004dff;
    animation: spinner-a4dj62 1s infinite linear;
  }

  .spinner::before,
  .spinner::after {
    content: '';
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: spinner-a4dj62 2s infinite;
  }

  .spinner::after {
    margin: 8px;
    animation-duration: 3s;
  }

  @keyframes spinner-a4dj62 {
    100% {
      transform: rotate(1turn);
    }
  }
</style>
